<template>
	<view class="order-menu-box">
		<view class="order-total" @tap="order(0)">
			<text class="order-total-name">我的订单</text>
			<text class="order-totla-see">全部订单<image class="jt"  src="../../static/image/userindex/jt02.png" mode=""></image></text>
		</view>
		<view class="order-menu-list">
			<!-- <view class="order-menu-item" v-for="(item,key) in menu"  @tap="order(key + 1)">
				<image :src="item.src" mode="widthFix" class="menu-icon"></image>
				<view class="menu-name">{{item.name}}</view>
				<view class="right_t">
					2
				</view>
			</view> -->
			<view class="dfk" @tap="order(1)">
				<view class="dfk_pic">
					<image src="../../static/tabbar-img/dfk02.png" mode="">
					</image>
					<view class="right_t" v-if="dfkNum !=0">{{dfkNum}}
					</view>
				</view>
				<view class="dfk_wz">
					待付款
				</view>
			</view>
			<view class="dfh"  @tap="order(2)">
				<view class="dfh_pic">
					<image src="../../static/tabbar-img/dfh02.png" mode=""></image>
					<view class="right_t" v-if="dfhNum !=0">{{dfhNum}}</view>
				</view>
				<view class="dfh_wz">
					待发货
				</view>
			</view>
			<view class="dsh" @tap="order(3)">
				<view class="dsh_pic">
					<image src="../../static/tabbar-img/dsh02.png" mode=""></image>
					<view class="right_t" v-if="dshNum !=0">{{dshNum}}</view>
				</view>
				<view class="dsh_wz">
					待收货
				</view>
			</view>
			<view class="dpj"  @tap="order(4)">
				<view class="dpj_pic">
					<image src="../../static/tabbar-img/hua02.png" mode=""></image>
					<view class="right_t"  v-if="dpjNum !=0">{{dpjNum}}</view>
				</view>
				<view class="dpj_wz">
					待评价
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['dfkNum','dshNum','dfhNum','dpjNum'],
		data(){
			return {
				state:0,
				page:1,
				menu:[{'name' : '待付款',src:require('../../static/tabbar-img/dfk02.png')},
				{'name' : '待发货',src:require('../../static/tabbar-img/dfh.png')},
				{'name' : '待收货',src:require('../../static/tabbar-img/dsh02.png')},
				{'name' : '已完成',src:require('../../static/tabbar-img/hua02.png')}]
			}
		},
	
		methods:{
		
			order(e){
				var url = '/pages/order/list?state='+e;
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-menu-box{background-color: #FFFFFF;}
	.order-total{overflow: hidden;padding: 28upx 30upx; border-bottom: 2upx solid #E1E1E1;}
	.order-total-name{font-size: 32upx;font-weight: bold; color:#333333;}
	.order-totla-see{float: right;color:#333333; font-size: 28upx;}
	.order-totla-see i{color:#999999;font-size: 32upx; margin-left: 20upx;}
	.order-menu-list{padding-top:10upx}
	// .order-menu-item{width: 25%;height:110upx;float: left;text-align: center;position: relative;}
	.menu-name{font-size: 28upx;position:absolute;bottom:0;left: 25%;}
	.menu-icon{
		width: 50upx;
		// height: 60upx;
	}
	.order-menu-item {
	
		}
	.order-totla-see .jt {
		width: 16upx;
		height: 32upx;
		margin-top: -6upx;
		vertical-align: middle;
		margin-left: 20upx;
	}
	.order-menu-list {
		// margin:20upx 0;
		padding: 34upx 0;
		// overflow: hidden;
		height: 100upx;
		display:flex;
		.dfk {
			flex:1;
			display:flex;
			align-items: center;
			flex-direction:column;
			justify-content: space-between;
			.dfk_pic {
				position: relative;
				image {
					// flex: 1;
					width: 56upx;
					height: 48upx;
				}
				.right_t {
					position: absolute;
					width: 30upx;
					height: 30upx;
					// padding: 4upx;
					background-color: #D51519;
					border-radius:50%;
					text-align: center;
					// line-height: 30upx;
					line-height: 32upx;
					color: #FFFFFF;
					top: -14upx;
					right: -10upx;
					// transform: translate(-50%, 50%);
					font-size: 20upx;
				}
			}
			.dfk_wz {
				margin-top: 10upx;
				color: #333333;
				font-size: 28upx;
			}
		}
		.dfh {
			flex:1;
			display:flex;
			align-items: center;
			flex-direction:column;
			justify-content: space-between;
			.dfh_pic {
				position: relative;
				image {
					width: 56upx;
					height: 56upx;
				}
				.right_t {
					position: absolute;
					width: 30upx;
					height: 30upx;
					// padding: 4upx;
					background-color: #D51519;
					border-radius:26upx;
					text-align: center;
					line-height: 32upx;
					color: #FFFFFF;
					top: -14upx;
					right: -10upx;
					// transform: translate(-50%, 50%);
					font-size: 20upx;
				}
			}
			
			.dfh_wz {
				margin-top: 10upx;
				color: #333333;
				font-size: 28upx;
			}
		}
		.dsh {
			flex:1;
			display:flex;
			align-items: center;
			flex-direction:column;
			justify-content: space-between;
			.dsh_pic {
				position: relative;
				image {
					width: 64upx;
					height: 48upx;
				}
				.right_t {
					position: absolute;
					width: 30upx;
					height: 30upx;
					// padding: 4upx;
					background-color: #D51519;
					border-radius:26upx;
					text-align: center;
					line-height: 32upx;
					color: #FFFFFF;
					top: -14upx;
					right: -10upx;
					// transform: translate(-50%, 50%);
					font-size: 20upx;
				}
			}
		
			.dsh_wz {
				margin-top: 10upx;
				color: #333333;
				font-size: 28upx;
			}
		}
		.dpj {
			flex:1;
			display:flex;
			align-items: center;
			flex-direction:column;
			justify-content: space-between;
			.dpj_pic {
				position: relative;
				image {
					width: 58upx;
					height: 54upx;
				}
				.right_t {
					position: absolute;
					width: 30upx;
					height: 30upx;
					// padding: 4upx;
					background-color: #D51519;
					border-radius:26upx;
					text-align: center;
					line-height: 32upx;
					color: #FFFFFF;
					top: -12upx;
					right: -8upx;
					// transform: translate(-50%, 50%);
					font-size: 20upx;
				}
			}
		
			.dpj_wz {
				margin-top: 10upx;
				color: #333333;
				font-size: 28upx;
			}
		}
	}
</style>
